<template>
  <el-dialog v-model="centerDialogVisible" :show-close="false" class="logindialog" width="100%" top="0" center>
    <div class="close" @click="close">
      <span>
        <el-icon color="#b5b6c8" size="16">
          <CloseBold />
        </el-icon>
      </span>
    </div>
    <div class="center" v-if="iscomponent != 'eroll'">
      <img @click="$openPage('/home')" src="@/assets/img/world.png" alt="" />
      <div class="move">
        <Transition name="fade">
          <!-- <component :is="iscomponent"></component> -->
          <login v-if="iscomponent == 'login'"></login>
        </Transition>
        <Transition name="fade">
          <!-- <component :is="iscomponent"></component> -->
          <account v-if="iscomponent == 'account'"></account>
        </Transition>
      </div>

      <el-divider> <span class="line">OR</span> </el-divider>
      <img class="user" v-if="iscomponent == 'login'" @click="iscomponent = 'account'" src="@/assets/img/user.png"
        alt="" />
      <img class="user" v-if="iscomponent == 'account'" @click="iscomponent = 'login'" src="@/assets/img/phone.png"
        alt="" />
      <p @click="iscomponent = 'eroll'">
        {{ $t("language.loginhome.eroll")
        }}<el-icon size="18">
          <Right />
        </el-icon>
      </p>
    </div>
    <eroll @openlogin="openlogin" v-if="iscomponent == 'eroll'"></eroll>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineExpose, defineAsyncComponent, watch, computed } from "vue";
let login = defineAsyncComponent(() => import("@/components/login.vue"));
let account = defineAsyncComponent(() => import("@/components/account.vue"));
let eroll = defineAsyncComponent(() => import("@/components/eroll.vue"));
import { useStore } from "vuex";
const store = useStore();
let centerDialogVisible = computed(() => store.state.loginopen);
//判断是登陆还是注册
let loginoreroll = computed(() => store.state.loginoreroll);
let iscomponent = ref("login");
watch(
  centerDialogVisible,
  () => {
    if (loginoreroll.value == "login") {
      iscomponent.value = "login";
    } else {
      iscomponent.value = "eroll";
    }
  },
  {
    immediate: true,
  }
);

let close = () => {
  store.commit("SET_LOGIN", false);
  iscomponent.value = "login";
};

let open = (val: string) => {
  store.commit("SET_LOGIN", true);
  iscomponent.value = val;
};
let openlogin = (val) => {
  iscomponent.value = val;
};
defineExpose({
  open,
});
</script>

<style lang="scss">
.logindialog {
  will-change: transform!important;
  transform: translateZ(0)!important;
  padding: 10px !important;
  background-color: rgb(50, 53, 62);
  margin: 0;
}
.el-dialog{
  will-change: transform!important;
  transform: translateZ(0)!important;
}
.el-dialog__header {
  padding: 0 0 0 !important;
}

.close {
  width: 100%;
  @include flex(row, flex-end, center);

  span {
    display: block;
    width: 28px;
    height: 28px;
    @include flex(row, center, center);
    border: 2px solid #b5b6c8;
    border-radius: 16px;
  }
}

.center {
  width: 100%;
  margin-top: 20px;
  @include flex(column, flex-start, center);

  .move {
    width: 100%;
    min-height: 295px;
    position: relative;
  }

  >img {
    height: 59px;
    width: 150px;
    margin: 0 auto;
  }

  .el-divider__text {
    background-color: rgb(50, 53, 62);
  }

  .el-divider--horizontal {
    border-top: 1px solid #4a4c53;
  }

  .line {
    display: block;
    color: #fff;
    font-size: 12px;
  }

  .user {
    width: 50px;
  }

  >p {
    @include flex(row, center, center);
    padding-top: 40px;
    font-size: 18px;
    color: #03b484;

    .el-icon {
      margin: 3px 0 0 10px;
    }
  }
}

.logindialog {
  will-change: transform!important;
  transform: translateZ(0)!important;
  padding: 10px !important;
  background-color: #32353e !important;
  --el-dialog-bg-color: #32353e !important;
  height: 100vh;
}
</style>
